.left-box{
  width: 20%;
  height: 100%;
}
.center-box{
  width: 25%;
  height: 100%;
}
.right-box{
  width: 40%;
  height: 100%;
}
.top-title{
  padding: 20px;
  border-bottom: 1px solid #eaeaea;
  font-size: 20px;
  font-weight: bold;
}
.top-view{
  padding:20px; 
}
.btn-reset{
  line-height: 30px;
  min-width: 50px;
  padding: 0 10px;
  background-color: #0078d7;
  color: white;
  border-radius: 5px;
  text-align: center;
}

.btn-reset:hover{
  background-color: #0064b4;
}

.btn-create{
  line-height: 30px;
  min-width: 50px;
  padding: 0 10px;

  background-color: #ff6600;
  color: white;
  border-radius: 5px;
  text-align: center;
}
.btn-create:hover{
  background-color: #e65c00;
}

.btn-delete{
  line-height: 30px;
  min-width: 50px;
  padding: 0 10px;

  background-color: #912020;
  color: white;
  border-radius: 5px;
  text-align: center;
}
.btn-delete:hover{
  background-color: #7d1d1d;
}


.bottom-list{
  padding: 20px;
  height: 54vh;
  overflow-y: auto;
}
.list-item{
  padding: 10px;
  border-bottom: 1px solid #eaeaea;
  cursor: pointer;
}
.list-item:hover{
  background-color: #eaeaea;
}
.list-item.active{
  background-color: #eaeaea;
}